//面向对象
function Page(el, option={}){
    this.el = document.querySelector(el)
    this.option = option


    this.init()
}
Page.prototype.init = function(){
    
    //创建标签
    this.pageCreate()
    //鼠标移入分页标签
    this.mouseOver()
    //点击事件
    this.pageClick()
    
}

//创建分页标签
Page.prototype.pageCreate = function(){
    //清空盒子数据
    this.el.innerHTML = ''
    //获取第二个实参的pageTag对象
    //对pageTag对象进行遍历
    for(let key in this.option.pageTag){
        this.pCreate('p', this.option.pageTag[key], this.el)
    }
    this.numCreate()
}

//创建分页页码
Page.prototype.numCreate = function(){
    //获取盒模型里的第三个p标签
    let pThree = this.el.querySelector('p:nth-child(3)')
    //清除盒模型里的第三个p标签的边框
    pThree.style.border = '0'
    pThree.style.margin = '0px'
    pThree.style.padding = '0'
    //通过循环创建页码
    // for(let i=1; i<6; i++){
    //     this.pCreate('p', i, pThree)
    // }
    
    //判断，加省略号...
    let pageNum = this.option.pageInfo.pageNum
    this.option.pageInfo.totalPage = Math.ceil(this.option.pageInfo.pageData/this.option.pageInfo.pageSize)
    let pageTatolNum = this.option.pageInfo.totalPage
    if(pageTatolNum<9){
        for(let i=1; i<=pageTatolNum; i++) this.pCreate('p',i,pThree)
    }
    else if(pageNum<5){
        for(let i=1; i<=5; i++) this.pCreate('p',i,pThree)
        this.pCreate('p','...',pThree)
        for(let i=pageTatolNum-2; i<=pageTatolNum; i++) this.pCreate('p',i,pThree)
    }
    else if(pageNum==5){
        for(let i=1; i<=6; i++) this.pCreate('p',i,pThree)
        this.pCreate('p','...',pThree)
        for(let i=pageTatolNum-1; i<=pageTatolNum; i++) this.pCreate('p',i,pThree)
    }
    else if(pageNum>5 && pageNum<pageTatolNum-4){
        for(let i=1; i<=2; i++) this.pCreate('p',i,pThree)
        this.pCreate('p','...',pThree)
        this.pCreate('p',pageNum-2,pThree)
        this.pCreate('p',pageNum-1,pThree)
        this.pCreate('p',pageNum,pThree)
        this.pCreate('p',pageNum+1,pThree)
        this.pCreate('p',pageNum+2,pThree)
        this.pCreate('p','...',pThree)
        for(let i=pageTatolNum-1; i<=pageTatolNum; i++) this.pCreate('p',i,pThree)
    }
    else if(pageNum>=pageTatolNum-4){
        for(let i=1; i<=3; i++) this.pCreate('p',i,pThree)
        this.pCreate('p','...',pThree)
        for(let i=pageTatolNum-4; i<=pageTatolNum; i++) this.pCreate('p',i,pThree)
    }

}
//创建p标签，减少代码量
Page.prototype.pCreate = function(tagName, tagContent, parentObj){
    //创建新的p标签存放页码数
    let pObj = document.createElement(tagName)
    pObj.innerText = tagContent
    //给p标签添加css样式
    pObj.style.border = '1px solid black'
    pObj.style.margin = '0px 5px'
    pObj.style.padding = '0 5px'
    pObj.style.display = 'inline-block'
    //追加p标签
    parentObj.appendChild(pObj)
    //默认被选中的页码
    if(tagContent == this.option.pageInfo.pageNum){
        pObj.style.background = 'pink'
    }

    //tagContent为'...'时
    if(tagContent == '...'){
        //清除...的边框样式
        pObj.style.border = '0'

    }
}

//鼠标移入事件
Page.prototype.mouseOver = function(){
    //当鼠标移入分页标签中，改变鼠标样式
    this.el.onmouseover = (evt) =>{
        let e = evt || window.event
        //获取事件对象
        let target = e.target || e.srcElement
        //判断标签
        //console.log(this)
        if(target.nodeName === 'P'){
            //当分页标签为P时改变鼠标样式
            target.style.cursor = 'pointer'
        }
    }

}

//给标签页码所处的盒模型绑定点击事件
Page.prototype.pageClick = function(){
    //获取当前盒子
    //给当前盒子绑定点击事件
    this.el.onclick = (evt) =>{
        let e = evt || window.event
        //获取事件对象
        let target = e.target || e.srcElement
        //判断标签
        //console.log(this)
        if(target.nodeName === 'P'){
            console.log(true)
            switch(target.innerText){
                //首页
                case this.option.pageTag.first:
                    this.option.pageInfo.pageNum = 1
                    //重新创建分页标签
                    this.pageCreate()
                    break;
                //上一页
                case this.option.pageTag.prev:
                    if(this.option.pageInfo.pageNum == 1) return
                    this.option.pageInfo.pageNum = parseInt(this.option.pageInfo.pageNum) - 1
                    //重新创建分页标签
                    this.pageCreate()
                    break;
                //下一页
                case this.option.pageTag.next:
                    if(this.option.pageInfo.pageNum == this.option.pageInfo.totalPage) return
                    this.option.pageInfo.pageNum = parseInt(this.option.pageInfo.pageNum) + 1
                    //重新创建分页标签
                    this.pageCreate()
                    break;
                //末页
                case this.option.pageTag.last:
                    this.option.pageInfo.pageNum = this.option.pageInfo.totalPage
                    //重新创建分页标签
                    this.pageCreate()
                    break;
                
                default:
                    if(parseInt(target.innerHTML)>0){
                        this.option.pageInfo.pageNum = parseInt(target.innerHTML)
                        this.pageCreate()
                    }
                    break;
            }
        }
    }

}